/**
 * Created by ZhiQing on 2016/7/20.
 */
var canvasWidth = 400;
var canvasHeight = canvasWidth;
var isMouseDown = false;
var strokeColor = 'black';
var lastLoc = {x:0, y:0};
var lastTime = 0;
var lastLineWidth = -1;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = canvasWidth;
canvas.height = canvasHeight;

canvas.onmousedown = function(e){
    e.preventDefault();
    isMouseDown = true;
    lastLoc = windowToCanvas(e.clientX, e.clientY);
    lastTime = new Date().getTime();
};

canvas.onmouseup = function(e){
    e.preventDefault();
    isMouseDown = false;
};

canvas.onmouseout = function(e){
    e.preventDefault();
    isMouseDown = false;
};

canvas.onmousemove = function(e){
    e.preventDefault();
    if(isMouseDown){
        var curLoc = windowToCanvas(e.clientX, e.clientY);
        var curTime = new Date().getTime();
        var s = calcDistance(curLoc,lastLoc);
        //console.log('s:'+s+ '  curLoc.x:'+curLoc.x+ '  curLoc.y:'+curLoc.y+ '  lastLoc.x'+lastLoc.x +'   lastLoc.y:'+lastLoc.y);
        var t = curTime - lastTime;
        var lineWidth = calcWidth(s,t);
        context.beginPath();
        context.moveTo(lastLoc.x,lastLoc.y);
        context.lineTo(curLoc.x,curLoc.y);
        context.strokeStyle = strokeColor;
        context.lineWidth = lineWidth;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.stroke();
        lastTime = curTime;
        lastLoc = curLoc;
        lastLineWidth = lineWidth;
    }
};

$('.color_btn').click(function(){
    $('.color_btn').removeClass('color_btn_selected');
    $(this).addClass('color_btn_selected');
    strokeColor = $(this).css('background-color');
});

$('#clear_btn').click(function(){
    context.clearRect(0,0,canvasWidth,canvasHeight);
    drawGrid();
});

$('#save_btn').click(function(){
   if($('.showChild').length<4){
        var mySrc = canvas.toDataURL("image/png");
        $("#show").append("<div class='showChild'><img src="+ mySrc + "></div>");
        context.clearRect(0,0,canvasWidth,canvasHeight);
        drawGrid();
    }

});

$('#del_btn').click(function(){
    $('.showChild').last().remove();
});
drawGrid();


function windowToCanvas(x,y){
    var bbox = canvas.getBoundingClientRect();
    return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
}

function calcDistance(col1,col2){
    return n = (col1.x - col2.x)*(col1.x - col2.x) + (col1.y - col2.y)*(col1.y - col2.y);
}

function calcWidth(s,t){
    var v = 0;
    if(s == 0){
        v = 0;
    }else{
        v = s/t;
    }

    var lineWd = 0;
    if(v<0.1){
        lineWd = 30;
    }else if(v>=10){
        lineWd = 5;
    }else{
        lineWd = 30 -v/(10-0.1)*(30-5);
    }

    if(lastLineWidth == -1){
        return lineWd;
    }else{
        return 4/5*lastLineWidth+1/5*lineWd;
    }
}

function drawGrid(){

    context.save();
    context.strokeStyle = 'rgb(230,11,9)';
    context.beginPath();
    context.moveTo(3,3);
    context.lineTo(canvasWidth - 3,3);
    context.lineTo(canvasWidth - 3, canvasHeight - 3);
    context.lineTo(3,canvasHeight - 3);

    context.closePath();
    context.lineWidth = 6;
    context.stroke();

    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(canvasWidth,canvasHeight);
    //context.setLineDash([10,15]);

    context.moveTo(0,canvasHeight);
    context.lineTo(canvasWidth,0);
    //context.setlineDash([10,15]);

    context.moveTo(canvasWidth/2,0);
    context.lineTo(canvasWidth/2,canvasHeight);
    //context.setLineDash([10,15]);

    context.moveTo(0,canvasHeight/2);
    context.lineTo(canvasWidth,canvasHeight/2);
    context.setLineDash([10,15]);

    context.closePath();
    context.lineWidth = 1;
    context.stroke();
    context.restore();

}








































